<template>
  <div class="role-container">
    <!-- 顶部筛选区 -->
    <div class="filter-bar">
      <!-- 角色状态下拉 -->
      <select
        class="status-select"
        @change="Status()"
        v-model="MyStatusSelect.StatusSelect"
      >
        <option value="">角色状态</option>
        <option value="1">启用</option>
        <option value="0">禁用</option>
      </select>

      <!-- 搜索框 -->
      <div class="search-group">
        <input
          type="text"
          class="search-input"
          placeholder="请输入角色名称进行模糊搜索"
          v-model="SearchData"
        />
        <button class="search-btn" type="button" @click="Searcch()">
          <i class="icon-search"></i>
        </button>
      </div>

      <!-- 添加按钮 -->
      <button class="add-btn" type="button" @click="showAddRoleModal()">
        <i class="icon-plus"></i> 添加系统角色
      </button>
    </div>

    <!-- 表格区 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th width="50">
              <input
                type="checkbox"
                class="checkbox-all"
                @click="All_Checked($event)"
              />
            </th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th>角色权限配置</th>
            <th width="120">角色启用状态</th>
            <th>最后编辑时间</th>
            <th width="160">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表格数据行 -->
          <tr v-for="item in Arr" :key="item.id">
            <td>
              <input
                type="checkbox"
                class="checkbox-item"
                v-model="item.checked"
                @change="CheckedBox($event)"
              />
            </td>
            <td>{{ item.rolename }}</td>
            <td>{{ item.describe }}</td>
            <td>
              {{
                item.powers
                  .split(",")
                  .map((id) => powerMap.get(+id) || id)
                  .join(",")
              }}
            </td>
            <td>
              <span
                :class="[
                  'status-dot',
                  item.status === 1 ? 'enabled' : 'disabled',
                ]"
              ></span>
              {{ item.status === 1 ? "启用中" : "已停用" }}
            </td>
            <td>{{ item.lasttime }}</td>
            <td>
              <button
                class="action-btn"
                type="button"
                @click="PutData(item.id)"
              >
                <i class="icon-edit"></i>
              </button>
              <button
                class="action-btn delete"
                type="button"
                @click="dele(item.id, item.rolename)"
              >
                <i class="icon-delete"></i>
              </button>
              <button
                class="action-btn"
                type="button"
                @click="CallData(item.id, item.status)"
              >
                <i class="icon-refresh"></i>
              </button>
            </td>
          </tr>
          <!-- 更多行... -->
        </tbody>
      </table>
    </div>
    <!-- 自定义确认弹框 -->
    <div id="confirmModal" class="confirm-modal">
      <div class="confirm-box">
        <!-- 弹框头部 -->
        <div class="confirm-header">提示</div>
        <!-- 弹框主体（新增图标容器） -->
        <div class="confirm-body">
          <div class="confirm-icon"></div>
          <!-- 橙色感叹号图标 -->
          <p id="confirmText">删除后，角色将不再具备相应权限</p>
        </div>
        <!-- 弹框底部按钮 -->
        <div class="confirm-buttons">
          <button class="confirm-btn cancel" @click="hideConfirm">取消</button>
          <button class="confirm-btn sure" @click="confirmDelete">确定</button>
        </div>
      </div>
    </div>
    <!-- 添加角色弹窗 -->
    <div
      class="add-role-modal"
      :style="{ display: addRoleModalVisible ? 'flex' : 'none' }"
    >
      <div class="add-role-box">
        <!-- 头部：标题 + 关闭按钮 -->
        <div class="add-role-header">
          <span>添加系统角色</span>
          <i class="icon-close" @click="hideAddRoleModal"></i>
        </div>
        <!-- 表单区域 -->
        <div class="add-role-body">
          <!-- 权限配置（树结构） -->
          <div class="form-item">
            <label>角色名称</label>
            <div class="input-container">
              <!-- 新增容器，统一控制输入框宽度 -->
              <input
                type="text"
                v-model="form.roleName"
                placeholder="请输入1-20个字符"
                @blur="validateRoleName"
              />
              <span class="error-tip" v-show="formErrors.roleName"
                >请输入1-20个字符</span
              >
            </div>
          </div>
          <div class="form-item">
            <label>描述</label>
            <div class="input-container">
              <textarea
                v-model="form.describe"
                placeholder="请输入描述"
                rows="3"
              ></textarea>
            </div>
          </div>
          <div class="form-item">
            <label>是否启用</label>
            <div class="input-container radio-group">
              <!-- 容器包裹，对齐布局 -->
              <label class="radio-item">
                <input
                  type="radio"
                  name="status"
                  value="1"
                  v-model="form.status"
                />
                启用
              </label>
              <label class="radio-item">
                <input
                  type="radio"
                  name="status"
                  value="0"
                  v-model="form.status"
                />
                停用
              </label>
            </div>
          </div>
          <div class="form-item">
            <label>权限配置</label>
            <div class="input-container permission-tree">
              <!-- 容器包裹，对齐布局 -->
              <label class="checkbox-all">
                <input
                  type="checkbox"
                  v-model="checkAll"
                  @change="toggleAllPermissions"
                />
                开放所有权限
              </label>
              <ul class="tree">
                <li v-for="(node, idx) in permissionTree" :key="idx">
                  <label>
                    <input
                      type="checkbox"
                      :checked="node.checked"
                      @change="togglePermissionNode(node)"
                    />
                    {{ node.name }}
                  </label>
                  <ul v-if="node.children" class="children">
                    <li v-for="(child, cIdx) in node.children" :key="cIdx">
                      <label>
                        <input
                          type="checkbox"
                          :checked="child.checked"
                          @change="toggleChild(child, node)"
                        />
                        {{ child.name }}
                      </label>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="add-role-footer">
          <button class="cancel-btn" @click="hideAddRoleModal">取消</button>
          <button class="confirm-btn" @click="submitAddRole">确定</button>
        </div>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <div
      class="edit-modal"
      v-show="editDialogVisible"
      style="
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        z-index: 9999;
      "
    >
      <h3>编辑系统角色</h3>
      <form>
        <!-- 隐藏角色ID（必传参数） -->
        <input type="hidden" v-model="editForm.id" />

        <!-- 角色名称（必填） -->
        <div class="form-group">
          <label>角色名称：</label>
          <!-- 自动带星号 -->
          <input type="text" v-model="editForm.rolename" required />
        </div>

        <!-- 描述（非必填，移除星号） -->
        <div class="form-group">
          <label class="no-required">描述：</label>
          <!-- 添加 no-required 清除星号 -->
          <input type="text" v-model="editForm.describe" />
        </div>
        <!-- 启用状态（必填） -->
        <div class="form-group">
          <label>是否启用：</label>
          <!-- 自动带星号 -->
          <span class="radio-group">
            <label
              ><input
                type="radio"
                name="status"
                value="1"
                v-model="editForm.status"
              />
              启用</label
            >
            <label
              ><input
                type="radio"
                name="status"
                value="0"
                v-model="editForm.status"
              />
              停用</label
            >
          </span>
        </div>

        <!-- 权限树（必填） -->
        <div class="form-group">
          <label>权限配置：</label>
          <!-- 自动带星号 -->
          <div class="permission-tree">
            <div v-for="perm in permissionData" :key="perm.id">
              <input
                type="checkbox"
                :value="perm.id"
                v-model="editForm.powers"
              />
              {{ perm.name }}
              <div v-if="perm.children" class="tree-children">
                <div v-for="child in perm.children" :key="child.id">
                  <input
                    type="checkbox"
                    :value="child.id"
                    v-model="editForm.powers"
                  />
                  {{ child.name }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <button type="button" @click="editDialogVisible = false">取消</button>
          <button type="button" @click="submitEdit">确定</button>
        </div>
      </form>
    </div>
    <!-- 分页容器 -->

    <!-- 分页容器 -->
    <div class="pagination">
      <!-- 总条数 -->
      <span class="total">共 {{ totalCount }} 条</span>
      <!-- 右侧操作区 -->
      <div class="pagination-right">
        <!-- 每页条数下拉 -->
        <select v-model="pageSize" @change="handlePageSizeChange">
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
        </select>
        <!-- 页码区域 -->
        <div class="pages">
          <button
            class="page-btn"
            @click="prevPage"
            :disabled="currentPage === 1"
          >
            ‹
          </button>
          <button
            v-for="n in totalPages"
            :key="n"
            class="page-btn"
            @click="handlePageClick(n)"
            :class="{ active: n === currentPage }"
          >
            {{ n }}
          </button>
          <button
            class="page-btn"
            @click="nextPage"
            :disabled="currentPage === totalPages"
          >
            ›
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import httpsData from "@/urtil/https";
export default {
  data() {
    return {
      editDialogVisible: false, // 编辑弹窗可见性
      editForm: {
        // 编辑表单数据（对应接口参数）
        id: null, // 角色ID（必传）
        rolename: "", // 角色名称（必传）
        describe: "", // 描述（非必传）
        status: 1, // 是否启用（1=启用，0=停用，必传）
        powers: [], // 权限ID数组（提交时转逗号分隔字符串）
      },
      permissionData: [], // 权限树数据（需从接口加载，示例结构）
      roleList: [],
      //角色状态StatusSelect
      MyStatusSelect: {
        //Select的状态值
        StatusSelect: "",
        //选中的数据存储
        CheckedArr: [],
        //选中的id
        CheckedArrId: "",
        AllChecked: [],
      },
      //处理角色
      //获取所有角色列表数据
      Arr: [],
      // ...原有数据
      currentPage: 1, // 当前页码
      pageSize: 4, // 每页条数
      totalCount: 0, // 总条数（接口返回 pagecount）
      totalPages: 0, // 总页数（接口返回 allpage）
      //搜索数据
      SearchData: "",
      // ...原有数据
      addRoleModalVisible: false, // 弹窗显示状态
      form: {
        roleName: "", // 对应接口 `rolename`
        describe: "", // 对应接口 `describe`
        status: "1", // 对应接口 `status`（1:启用，0:停用）
        powers: "", // 对应接口 `powers`（权限ID逗号分隔，如 "1,2,3"）
      },
      formErrors: {
        roleName: false, // 角色名称校验状态
      },
      powerMap: new Map(), // 存储 权限ID → 名称 的映射
      checkAll: false, // 全选开关
      permissionTree: [],
      confirmId: null, // 保存待删除角色ID
    };
  },
  mounted() {
    //默认状态
    this.apply();
    this.fetchPermissionTree(); // 初始化加载权限树
  },
  methods: {
    //重置权限
    resetPermissionTree(tree) {
      tree.forEach((node) => {
        node.checked = false;
        if (node.children) this.resetPermissionTree(node.children);
      });
    },
    // ========== 新增：加载并转换权限树 ==========
    async fetchPermissionTree() {
      try {
        const res = await httpsData.SysadminTree();
        console.log("接口返回:", res); // 👉 确认是否有数据
        const flatData = res.data?.data || [];
        // 额外校验：确保是数组
        if (!Array.isArray(flatData)) {
          this.$message.error("权限树数据格式错误");
          return;
        }
        this.permissionTree = this.convertToTree(flatData);
        // ========== 修复：递归构建映射 ==========
        this.powerMap.clear();
        const traverse = (nodes) => {
          nodes.forEach((node) => {
            this.powerMap.set(node.id, node.name); // 记录当前节点
            if (node.children.length) {
              traverse(node.children); // 递归子节点
            }
          });
        };
        traverse(this.permissionTree); // 从根节点开始遍历
        console.log("树形数据:", this.permissionTree); //  确认转换后的数据结构
        // ========== 新增：构建权限 ID→名称映射 ==========
      } catch (err) {
        console.error("权限树加载失败:", err);
        this.$message.error("权限树加载失败");
      }
    },
    // ========== 新增：扁平数据转树形结构 ==========
    convertToTree(flatData) {
      const idMap = new Map();
      const tree = [];

      flatData.forEach((item) => {
        const node = {
          id: item.id,
          name: item.name,
          checked: false,
          children: [],
        };
        idMap.set(item.id, node);
      });

      // 仍尝试关联子节点（若 parentid 有效）
      flatData.forEach((item) => {
        const currentNode = idMap.get(item.id);
        if (item.parentid === 0) {
          tree.push(currentNode); // 一级节点入树
        } else {
          const parentNode = idMap.get(item.parentid);
          if (parentNode) {
            // 父节点存在时关联
            parentNode.children.push(currentNode);
          }
        }
      });

      return tree;
    },
    // ========== 新增：收集选中的权限ID ==========
    collectPermissionIds() {
      const ids = [];
      const traverse = (tree) => {
        tree.forEach((node) => {
          if (node.checked) {
            ids.push(node.id); // 收集当前节点ID
            if (node.children) traverse(node.children); // 递归子节点
          }
        });
      };
      traverse(this.permissionTree);
      return ids.join(","); // 转成逗号分隔的字符串（如 "1,3,5"）
    },
    // ========== 新增：全选/取消全选 ==========
    toggleAllPermissions() {
      this.permissionTree.forEach((node) => {
        node.checked = this.checkAll;
        if (node.children) {
          node.children.forEach((child) => (child.checked = this.checkAll));
        }
      });
    },
    // ========== 新增：单个节点勾选 ==========
    togglePermissionNode(node) {
      node.checked = !node.checked;
      // 同步全选状态（可选：若需要严格全选校验）
      this.checkAll = this.permissionTree.every((n) => n.checked);
    },
    // 显示弹窗（重置表单）
    showAddRoleModal() {
      this.addRoleModalVisible = true;
      this.form = { roleName: "", desc: "", status: "1", permissions: [] };
      this.formErrors.roleName = false;
      this.checkAll = false;
      this.resetPermissionTree(this.permissionTree); // 重置权限树选中状态
    },
    // ========== 1. 收集选中的权限 ID（递归遍历） ==========
    collectCheckedPermissions() {
      const ids = [];
      // 递归遍历函数
      const traverse = (nodes) => {
        nodes.forEach((node) => {
          if (node.checked) {
            // 节点被选中
            ids.push(node.id);
          }
          if (node.children.length) {
            // 有子节点，递归
            traverse(node.children);
          }
        });
      };
      traverse(this.permissionTree); // 从根节点开始遍历
      return ids.join(","); // 转成接口需要的字符串格式（如 "1,2,3"）
    },
    toggleChild(child) {
      // 切换子节点的选中状态
      child.checked = !child.checked;
    },
    // 隐藏弹窗
    hideAddRoleModal() {
      this.addRoleModalVisible = false;
    },
    // 添加显示确认弹框
    showConfirm(id, rolename) {
      this.confirmId = id;
      document.getElementById(
        "confirmText"
      ).innerText = `删除后，${rolename} 将不再具备角色相应权限`;
      document.getElementById("confirmModal").style.display = "flex";
    },
    // 校验角色名称（1-20字符）
    validateRoleName() {
      this.formErrors.roleName = !(
        this.form.roleName && this.form.roleName.length <= 20
      );
    },

    // 隐藏确认弹框
    hideConfirm() {
      document.getElementById("confirmModal").style.display = "none";
      this.confirmId = null;
    },

    //渲染列表
    apply: function () {
      const params = {
        page: this.currentPage, // 传递当前页
        pagelimit: this.pageSize, // 传递每页条数
      };
      httpsData
        .GetSysadmin(params) // 传参给接口
        .then((val) => {
          const res = val.data || {}; // 直接取外层 data
          this.totalCount = res.pagecount || 0;
          this.Arr = res.data || [];
          this.totalPages = res.allpage || 0;
          this.Arr = res.data.map((item) => ({ ...item, checked: false }));
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 切换每页条数
    handlePageSizeChange() {
      this.currentPage = 1; // 切换条数 → 回到第一页
      this.apply();
    },
    // 点击页码
    handlePageClick(page) {
      this.currentPage = page;
      this.apply();
    },
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.apply();
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.apply();
      }
    },
    // 确认删除（调用接口）
    confirmDelete() {
      if (this.confirmId) {
        httpsData
          .DeleteSysadmin(this.confirmId)
          .then(() => {
            this.apply(); // 刷新表格
            this.hideConfirm(); // 关闭弹框
            console.log(this.form.powers);
          })
          .catch((err) => {
            console.log(err);
            this.hideConfirm();
          });
      }
    },
    // 修改原有删除方法
    dele: function (id, rolename) {
      this.showConfirm(id, rolename); // 唤起弹框
    },
    //添加树
    submitAddRole: function () {
      // 1. 校验角色名称（原有逻辑）
      const roleName = this.form.roleName.trim();
      if (roleName.length < 1 || roleName.length > 20) {
        this.formErrors.roleName = true;
        return;
      }

      // 2. 补全空参数（原有逻辑）
      if (!this.form.describe) this.form.describe = "";

      // 3. 新增：校验权限（必选）
      const powers = this.collectCheckedPermissions();
      if (!powers) {
        this.$message.error("请选择权限！"); // 替换 alert
        return;
      }

      // 4. 组装参数（新增 powers 字段）
      const params = {
        rolename: roleName,
        describe: this.form.describe,
        powers: powers, // ← 关键：传入收集的权限ID
        status: this.form.status,
      };

      // 5. 接口调用（原有逻辑扩展）
      httpsData
        .PostSysadmin(params) // 假设接口方法为 addRole
        .then((res) => {
          console.log("添加接口返回：", res); // 调试：看是否进入成功逻辑
          if (res.code === 0) {
            this.$message.success("角色添加成功！");
            this.dialogVisible = false;
            this.addRoleModalVisible = false; // 、
            // 新增：刷新角色列表
            this.apply();
          } else {
            this.$message.error(res.msg || "添加失败");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("网络错误，请重试");
        });
    },
    Searcch: function () {
      httpsData
        .SearchSysadmin(this.SearchData)
        .then((val) => {
          this.Arr = val.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //处理角色状态
    Status: async function () {
      // / 1. 确定目标状态（下拉框值转译："1"→启用(1)，其他→禁用(0)）
      const targetStatus = this.MyStatusSelect.StatusSelect === "1" ? 1 : 0;

      // 2. 封装“单个角色状态更新”逻辑（复用）
      const updateRoleStatus = async (item) => {
        try {
          const res = await httpsData.SysadminStatus({
            id: item.id, // 角色ID（需确保item含id字段）
            status: targetStatus, // 目标状态（修正：原错误的!targetStatus→直接传）
          });
          if (res.code === 0) {
            // 假设成功码为0
            item.status = targetStatus; // 前端实时更新状态
          } else {
            this.$message.error(
              `角色 ${item.id} 更新失败：${res.msg || "未知错误"}`
            );
          }
        } catch (err) {
          console.error("状态更新接口异常：", err);
          this.$message.error(`角色 ${item.id} 更新异常，请重试`);
        }
      };

      // 3. 批量处理“选中角色”和“全选角色”
      const allItems = [
        ...this.MyStatusSelect.CheckedArr,
        ...this.MyStatusSelect.AllChecked,
      ];
      await Promise.all(allItems.map(updateRoleStatus)); // 并行请求，提升效率

      // 4. 兜底：刷新角色列表（确保数据100%同步，即使前端更新失败也能覆盖）
      this.fetchRoleList();
    },
    //选中的数据
    CheckedBox: function ($event) {
      this.MyStatusSelect.CheckedArr = this.Arr.filter(
        (item) => item.checked == $event.target.checked
      );
      // 若下拉框已选择状态（非初始“角色状态”），自动触发状态更新
      if (this.MyStatusSelect.StatusSelect) {
        this.Status();
      }
    },
    //全选状态更新
    All_Checked: function ($event) {
      console.log($event);

      this.MyStatusSelect.AllChecked = this.Arr.filter(
        (item) => (item.checked = $event.target.checked)
      );
    },
    //更改角色状态
    CallData: function (roleId, targetStatus) {
      httpsData
        .SysadminStatus({ id: roleId, status: !targetStatus })
        .then((res) => {
          if (res.code === 0) {
            // 假设成功码为 0
            this.$message.success("状态更新成功");
            this.apply(); // 刷新角色列表，实时显示变更
          } else {
            this.$message.error(res.msg || "状态更新失败");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("网络异常，请重试");
        });
    },
    //PutData修改
    async PutData(PutId) {
      await this.fetchPermissionData();
      // ✅ 从角色列表中提取数据（假设 `roleList` 是表格数据源，包含完整字段）
      const targetRole = this.Arr.find((item) => item.id === PutId);
      if (!targetRole) {
        this.$message.error("角色数据不存在，请刷新重试");
        return;
      }

      // ✅ 回显数据到表单（处理权限为数组）
      this.editForm = {
        id: PutId,
        rolename: targetRole.rolename,
        describe: targetRole.describe || "",
        status: targetRole.status,
        powers: targetRole.powers ? targetRole.powers.split(",") : [], // 字符串转数组
      };

      // ✅ 打开编辑弹窗
      this.editDialogVisible = true;
    },
    // 新增：加载权限树的方法
    async fetchPermissionData() {
      try {
        const res = await httpsData.SysadminTree(); // 调用权限列表接口
        this.permissionData = res.data.data; // 假设接口返回权限树结构
        console.log(this.permissionData);
      } catch (err) {
        console.error("加载权限失败：", err);
        this.$message.error("权限数据加载失败");
      }
    },
    // 提交编辑：调用【编辑角色接口】
    async submitEdit() {
      try {
        // ✅ 1. 处理权限参数（数组转逗号分隔字符串）
        const powersStr = this.editForm.powers.join(",");

        // ✅ 2. 构造接口参数（严格对齐文档）
        const params = {
          id: this.editForm.id, // 必传：角色ID
          rolename: this.editForm.rolename, // 必传：角色名称
          describe: this.editForm.describe, // 非必传：描述
          powers: powersStr, // 必传：权限ID逗号分隔
          status: this.editForm.status, // 必传：启用状态（1/0）
        };

        // ✅ 3. 调用编辑接口（POST 方式，对齐文档地址）
        const res = await httpsData.PeoplePutData(params);
        console.log(res);
        // ✅ 4. 处理响应
        if (res.data.code === 0) {
          // 假设后端成功码为 0
          this.$message.success("编辑成功！");
          this.editDialogVisible = false; // 关闭弹窗
          this.apply();
        } else {
          this.$message.error(res.data.msg || "编辑失败");
        }
      } catch (err) {
        console.error("编辑接口异常：", err);
        this.$message.error("网络异常，请重试");
      }
    },
    // 刷新角色列表（示例：需调用角色列表接口）
    async fetchRoleList() {
      try {
        const res = await httpsData.apply(); // 假设角色列表接口为 /role/getrolelist
        this.roleList = res.data;
      } catch (err) {
        console.error("刷新角色列表失败：", err);
        this.$message.error("列表刷新失败");
      }
    },
  },
};
</script>
<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 确认弹框整体 */
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 弹框内容区 */
.confirm-box {
  width: 380px; /* 固定宽度 */
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 浅阴影 */
}

/* 弹框头部 */
.confirm-header {
  padding: 16px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #eee;
}

/* 弹框主体（图标+文本） */
.confirm-body {
  display: flex; /* 图标和文本同行 */
  align-items: center;
  padding: 20px;
}
/* 橙色感叹号图标 */
.confirm-icon {
  width: 24px;
  height: 24px;
  background: #ff9933; /* 橙色背景 */
  border-radius: 50%; /* 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  margin-right: 12px; /* 与文本间距 */
}
/* 图标内容（感叹号） */
.confirm-icon::before {
  content: "!";
  font-size: 14px;
}

/* 弹窗容器 */
.edit-modal {
  width: 600px; /* 匹配截图宽度 */
  border-radius: 4px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* 弹窗标题 */
.edit-modal h3 {
  font-size: 16px; /* 标题字号 */
  font-weight: 600; /* 加粗 */
  margin: 0 0 20px; /* 间距 */
  position: relative; /* 用于关闭按钮定位 */
}
/* 关闭按钮（模拟 Element UI 样式） */
.edit-modal h3::after {
  content: "\00d7"; /* × 符号 */
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px; /* 关闭按钮大小 */
  color: #999; /* 灰色 */
  cursor: pointer; /* 手型 */
}

/* 表单组统一样式 */
.edit-modal .form-group {
  margin-bottom: 16px; /* 间距 */
  display: flex; /* 横向布局 */
  align-items: center; /* 垂直居中 */
}
/* 标签样式（含必填星号） */
.edit-modal .form-group label {
  width: 80px; /* 标签固定宽度，对齐 */
  text-align: right; /* 右对齐 */
  margin-right: 10px; /* 与输入框间距 */
  font-size: 14px; /* 字号 */
}
/* 必填星号（红色） */
.edit-modal .form-group label::before {
  content: "* ";
  color: red; /* 星号红色 */
}
/* 非必填标签（移除星号） */
.edit-modal .form-group label.no-required::before {
  content: ""; /* 清除星号 */
}

/* 输入框 & 文本域 */
.edit-modal .form-group input[type="text"],
.edit-modal .form-group textarea {
  flex: 1; /* 占满剩余宽度 */
  width: 300px; /* 基础宽度 */
  padding: 6px 8px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字号 */
}
/* 描述框（多行） */
.edit-modal .form-group textarea {
  resize: vertical; /* 仅垂直拉伸 */
  min-height: 60px; /* 最小高度 */
}

/* 单选框组 */
.edit-modal .radio-group {
  display: inline-block; /* 行内布局 */
  margin-left: 10px; /* 与标签间距 */
}
.edit-modal .radio-group label {
  margin-right: 20px; /* 单选框间距 */
  font-size: 14px; /* 字号 */
}

/* 权限树容器 */
.permission-tree {
  margin-left: 90px; /* 对齐标签缩进 */
  max-height: 200px; /* 最大高度（出现滚动） */
  overflow-y: auto; /* 垂直滚动 */
}
/* 权限树节点 */
.permission-tree .tree-node {
  margin: 4px 0; /* 节点间距 */
}
/* 权限树子节点缩进 */
.permission-tree .tree-children {
  margin-left: 20px; /* 子节点缩进 */
}

/* 操作按钮组 */
.form-actions {
  text-align: center; /* 居中 */
  margin-top: 20px; /* 与表单间距 */
}
.form-actions button {
  padding: 6px 20px; /* 按钮大小 */
  margin: 0 8px; /* 按钮间距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 手型 */
}
/* 取消按钮（默认样式） */
.form-actions button:first-child {
  background: #fff; /* 白色背景 */
}
/* 确定按钮（蓝色） */
.form-actions button:last-child {
  background: #409eff; /*  Element UI 主色 */
  color: #fff; /* 白色文字 */
  border-color: #409eff; /* 边框同色 */
}
/* 弹框文本 */
.confirm-body p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 弹框底部按钮区 */
.confirm-buttons {
  display: flex;
  justify-content: flex-end; /* 按钮右对齐 */
  border-top: 1px solid #eee;
  padding: 15px;
}
/* 按钮通用样式 */
.confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
/* 取消按钮 */
.confirm-btn.cancel {
  background: #fff;
  color: #666;
  border: 1px solid #dcdcdc;
  margin-right: 8px; /* 与确定按钮间距 */
}
.confirm-btn.cancel:hover {
  border-color: #c0c4cc;
}
/* 确定按钮（蓝色） */
.confirm-btn.sure {
  background: #409eff;
  color: #fff;
  border: none;
}
.confirm-btn.sure:hover {
  background: #66b1ff;
}
/* 全局容器 */
.role-container {
  background-color: #f5f7fa;
  padding: 16px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* 筛选区布局 */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}
/* //启用 */
.enabled {
  background-color: #67c23a; /* 绿色 */
}
/* //禁用 */
.disabled {
  background-color: #909399; /* 灰色 */
}
/* 下拉框样式 */
.status-select {
  min-width: 120px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%23999' d='M1 1l5 4 5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  cursor: pointer;
}

/* 搜索框样式 */
.search-group {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}
.search-input {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}
.search-btn {
  width: 36px;
  height: 32px;
  border: none;
  border-left: 1px solid #dcdcdc;
  background-color: #f8f8f8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn:hover {
  background-color: #e8e8e8;
}

/* 添加按钮样式 */
.add-btn {
  height: 32px;
  padding: 0 16px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.add-btn:hover {
  background-color: #66b1ff;
}

/* 表格容器 */
.table-container {
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}
.data-table th {
  background-color: #fafafa;
  color: #666;
  font-weight: 500;
}
.data-table td {
  color: #333;
}
.data-table tr.even-row {
  background-color: #fcfcfc;
}

/* 复选框样式 */
.checkbox-all,
.checkbox-item {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 状态点样式 */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.status-dot.enabled {
  background-color: #67c23a;
}
.status-dot.disabled {
  background-color: #909399;
}

/* 操作按钮样式 */
.action-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-btn:hover {
  color: #666;
}
.action-btn.delete {
  color: #ff4d4f;
}
.action-btn.delete:hover {
  color: #ff7875;
}

/* 图标（使用 Unicode 字符替代） */
.icon-search::before {
  content: "🔍";
}
.icon-plus::before {
  content: "+";
}
.icon-edit::before {
  content: "✎";
}
.icon-delete::before {
  content: "🗑️";
}
.icon-refresh::before {
  content: "🔄";
}
/* 添加角色弹窗 */
.add-role-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.add-role-box {
  width: 600px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.add-role-header {
  padding: 16px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-role-header .icon-close {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}
.add-role-body {
  padding: 20px;
}
.form-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.form-item label {
  width: 101px;
  text-align: right;
  margin-right: 10px;
  color: #333;
}
.form-item input,
.form-item textarea {
  flex: 1;
  max-width: 300px;
  padding: 8px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}
.form-item textarea {
  height: 80px;
  resize: vertical;
}
.error-tip {
  color: #ff4d4f;
  font-size: 12px;
  margin-left: 10px;
}
.radio-group {
  display: flex;
  gap: 20px;
}
.radio-item input {
  margin-right: 4px;
}
.permission-tree {
  margin-left: 90px;
}
.checkbox-all {
  display: block;
  margin-bottom: 10px;
}
.tree {
  list-style: none;
  padding-left: 20px;
}
.tree li {
  margin: 8px 0;
}
.children {
  padding-left: 20px;
}
.add-role-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}
.cancel-btn,
.confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.cancel-btn {
  background: #fff;
  color: #666;
  border: 1px solid #dcdcdc;
  margin-right: 8px;
}
.confirm-btn {
  background: #409eff;
  color: #fff;
  border: none;
}
/* //分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #ebeef5;
}
.total {
  font-size: 14px;
  color: #666;
}
.pagination-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pagination select {
  padding: 6px 8px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 14px;
}
.pages {
  display: flex;
  gap: 4px;
}
.page-btn {
  padding: 6px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.page-btn.active {
  background: #409eff;
  color: #fff;
  border: none;
}
.page-btn:disabled {
  cursor: not-allowed;
  background: #f5f7fa;
  color: #c0c4cc;
  border: 1px solid #ebeef5;
}
</style>